<template>
  <div class="location" :style="{position:positionWay}">
    <template v-if="type === 'link'">
      <ul v-for="(arr1,index1) in linkArrFilter" :key="index1" class="ul">
        <router-link :to="item.href" class="link" :class="{active:cur == index1*group + index2}" tag="li" v-for="(item,index2) in arr1" :key="index2">
          {{item.name}}
        </router-link>
      </ul>
    </template>
    <template v-if="type === 'anchor'">
      <ul v-for="(arr1,index1) in linkArrFilter" :key="index1" class="ul">
        <li class="link" :class="{active:cur == index1*group + index2}" tag="li" v-for="(item,index2) in arr1" :key="index2" @click="pegeChange(index1*group + index2)">
          {{item.name}}
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    data () {
      return {
        group: 4
      }
    },
    computed: {
      linkArrFilter () {
        return _.chunk(this.linkArr, this.group)
      }
    },
    props: {
      cur: {
        type: [Number, String],
        default () {
          return 0
        }
      },
      type: {
        type: String,
        default: 'link'
      },
      positionWay: {
        type: String,
        default () {
          return 'fixed'
        }
      },
      linkArr: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      pegeChange(index) {
        this.$emit('pageChange', index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .location {
  	display: flex;
  	z-index: 10;
  	top: rem(140);
  	width: 92%;
  	height: rem(260);
  	overflow: hidden;
  	left: 4%;
  	.ul {
  		width: rem(250);
  	}
  	.link {
  		position: relative;
      box-sizing: border-box;
  		min-width: 4em;
      height: rem(36);
      line-height: rem(36);
  		font-size: rem(28);
  		color: #666;
  		padding-left: rem(44);
  		margin-bottom: rem(22);
      background-color: rgba(255,255,255,.5);
      border-radius: rem(24);
      box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  		&.active {
  			color: #e02028;
  			&::before {
  				background-color: #e02028;
  				animation: a_dot_grab 1.5s linear infinite;
  			}
  		}
  		&::before {
  			position: absolute;
  			left: rem(10);
  			// top: rem(10);
        top: 50%;
  			transform: translateY(-48%);
  			content: '';
  			width: rem(18);
  			height: rem(18);
  			border-radius: 50%;
  			background-color: #666;
  		}
  	}
  }
  @keyframes a_dot_grab {
  	0% {
  		transform: scale(0.8) translateY(-50%);
  		opacity: 0.5;
  	}
  	50% {
  		transform: scale(1.2) translateY(-50%);
  		opacity: 0.5;
  	}
  	100% {
  		transform: scale(1.5) translateY(-50%);
  		opacity: 0;
  	}
  }
</style>
